<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商品品牌管理</title>
<#include "../common/header.ftl"/>

    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
    <#--<link rel="stylesheet" href="/bootstrap/css/bootstrapv3.css">-->
    <script type="text/javascript" src="/js/plugins/fancybox/jquery.fancybox.js"></script>
    <script type="text/javascript" src="/bootstrap/js/jquery.form.js"></script>
    <link type="text/css" rel="stylesheet" href="/js/plugins/uploadifive/uploadifive.css" />
    <script type="text/javascript" src="/js/plugins/uploadifive/jquery.uploadifive.min.js"></script>
    <link rel="stylesheet" href="/bootstrap/css/qunit-1.11.0.css">
    <script type="text/javascript" src="/bootstrap/js/qunit-1.11.0.js"></script>
    <script type="text/javascript" src="/bootstrap/js/bootstrap-paginator.js"></script>
    <script type="text/javascript" src="/js/plugins/My97DatePicker/WdatePicker.js"></script>
    <link type="text/css" rel="stylesheet" href="/js/plugins/bootstrap-select/css/bootstrap-select.css" />
    <script type="text/javascript" src="/js/plugins/bootstrap-select/js/bootstrap-select.js"></script>




<#--图片显示样式-->
    <style type="text/css">
		.list_img{
		width: 50px;
		height: 50px;
		margin: 0;
		}

        .idCardItem{
            width: 160px;
            height: 160px;
            float:left;
            margin-right:10px;
            border: 0px solid #e3e3e3;
            text-align: center;
            padding: 5px;
        }
        .uploadImg{
            width: 150px;
            height: 150px;
            margin-top: 5px;
        }
        .swfupload{
            left: 0px;
            cursor: pointer;
        }
        .uploadify{
            height: 20px;
            font-size:13px;
            line-height:20px;
            text-align:center;
            position: relative;
            margin-left:auto;
            margin-right:auto;
            cursor:pointer;
            background-color: #337ab7;
            border-color: #2e6da4;
            color: #fff;
        }
    </style>
    <script>
        $(function(){
            $(".pic").fancybox();
        });
    </script>


<script type="text/javascript">
	$(function() {

		$("#query").click(function(){
			$("#currentPage").val(1);
			$("#searchForm").submit();
		})
		//---------------------------------------------
        //编辑品牌
        $(".editBrand").click(function(){
            //也可以根据 id 去查询郑航数据在返回显示
            $("#brandEditForm").clearForm(true);
            var datas = $(this).data("json");
            $("#id").val(datas.id);

           //-----格林威治时间转化为yyyy-MM-dd 的转换函数----------
            Date.prototype.format = function(format)
            {
                var o = {
                    "M+" : this.getMonth()+1, //month
                    "d+" : this.getDate(), //day
                    "h+" : this.getHours(), //hour
                    "m+" : this.getMinutes(), //minute
                    "s+" : this.getSeconds(), //second
                    "q+" : Math.floor((this.getMonth()+3)/3), //quarter
                    "S" : this.getMilliseconds() //millisecond
                }
                if(/(y+)/.test(format))
                    format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length));
                for(var k in o)
                    if(new RegExp("("+ k +")").test(format))
                        format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
                return format;
            }

            function chGMT(gmtDate){
                var mydate = new Date(gmtDate);
                mydate.setHours(mydate.getHours());
                return mydate.format("yyyy-MM-dd hh:mm:ss");
            }
           //----------------------------------------------------------------------------------------------------------------------


//           js将当前创建的new date() 时间转为"yyyy-MM-dd hh:mm:ss"
//            Date.prototype.format = function(format){
//                var o = {
//                    "M+" : this.getMonth()+1, //month
//                    "d+" : this.getDate(), //day
//                    "h+" : this.getHours(), //hour
//                    "m+" : this.getMinutes(), //minute
//                    "s+" : this.getSeconds(), //second
//                    "q+" : Math.floor((this.getMonth()+3)/3), //quarter
//                    "S" : this.getMilliseconds() //millisecond
//                }
//
//                if(/(y+)/.test(format)) {
//                    format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
//                }
//                for(var k in o) {
//                    if(new RegExp("("+ k +")").test(format)) {
//                        format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
//                    }
//                }
//                return format;
//            }
//            var nowStr = now.format("yyyy-MM-dd hh:mm:ss");
//           var now = new Date();

            $("#createdDate").text( chGMT(datas.createdDate) );
            //初次编辑, 时间不能为null保存
            if (datas.lastModifiedDate == null ){
                $("#lastModifiedDate").text( chGMT(datas.createdDate));
            }else{
                $("#lastModifiedDate").text( chGMT(datas.lastModifiedDate) );
            }

            $("#id").val(datas.id);
            var brandId = datas.id;
            $("#chineseName").val(datas.chineseName);
            $("#englishName").val(datas.englishName);
            $("#sequence").val(datas.sequence);
            $("#url").val(datas.url);
            $("#uploadImg").prop("src",datas.logo);
            $("#description").val(datas.description);
            //多选框下拉框的回显
            if (datas.brandCatalogs != null ){
                var arraybrandCatalog = (datas.brandCatalogs).split(',');
                $('.selectpicker').selectpicker('val',arraybrandCatalog );  //直接使用内置的回显方式回显
                $("#myModal").modal("show");
            }
            $("#myModal").modal("show");



            //上传品牌log
            $("#uploadBtn").uploadifive({
                buttonText:"更换品牌Logo",
                fileType:'image',
                fileObjName:'image',
                fileTypeDesc: "请上传品牌log",
                uploadScript:"/uploadImg?id="+ brandId,    //上传请求
                multi:false,   //是否多选
                onInit:function(instance){
                    $(".uploadifive-queue").hide();     //在上传初始化的时候把上传的进度条隐藏
                },
                onUploadComplete:function(file,data){
                    $("#uploadImg").prop("src",data);  //上传完毕后回显, 返回的是图片全名, 不是URL
                    $("#uploadImage").val(data);
                }
            });
        });

        //新增上传品牌log
        $("#uploadBtnNew").uploadifive({
            buttonText:"上传品牌Logo",
            fileType:'image',
            fileObjName:'image',
            fileTypeDesc: "请上传品牌log",
            uploadScript:"/uploadImg"  ,   //上传请求
            multi:false,                  //是否多选
            onInit:function(instance){
                $(".uploadifive-queue").hide();     // 在上传初始化的时候把上传的进度条隐藏
            },
            onUploadComplete:function(file,data){
                $("#uploadNewImg").prop("src",data);   //上传完毕后回显, 返回的是图片全名, 不是URL
                $("#uploadNewImg").val(data);
                $("#logoUrl").val(data);               //将图片文件的路径设置给input输入框的属性, 作为URL保存到数据库, 如果先将URL保存 ,更新起来比较麻烦
            }
        });
         //------------------------------------------------------------------------------------------

       //保存表单
        $("#saveform").click(function () {
            if ($('.selectpicker').val()==null){
                $.messager.alert("温馨提示","请选择品牌分类与商品分类");
            }
            else{
            $("#brandEditForm").ajaxSubmit({
                dataType: "json",
                success: function (data) {
                    if (data.success) {
                        $.messager.model = {
                            ok:{ text: "确定", classed: 'btn-success' },
                            cancel: { text: "关闭", classed: 'btn-error'}
                        };
                        $.messager.confirm("温馨提示", "更新成功!", function() {
                            $("#myModal").modal("hide");
                            $("#currentPage").val(1);
                            $("#searchForm").submit();
                        });
                    }
                    else {
                        $.messager.popup("更新失敗"+data.errorMsg);
                    }
                }
            })
            }
        });
        //----------------------------------------------------------------------------------------------------------------------

        //数据恢复頁面
        $(".recovery").click(function(){
            window.location.href="/recoveryBrandList";
        });
        //---------------

        //删除一行
        $(".deleteBrand").click(function () {
            var datas = $(this).data("json");
            var brandId = datas.id;
            var chineseName = datas.chineseName;
            $.messager.confirm("温馨提示", "您确定要删除..>>" + chineseName + "<<..品牌记录吗?", function () {
                $.ajax({
                    url: "/deleteBrand",
                    data: {id: brandId},
                    dataType: "json",
                    success: function (data) {
                        if (data.success) {
                            $.messager.popup("温馨提示: 删除成功!");
                            location.reload();
                        } else {
                            $.messager.alert("温馨提示", "删除失败");
                        }
                    }
                })
            });
        });
        //--------------------------

        //取消
        $("#cancel,#cancelNew").click(function(){
            $("#myModal, #myModalNew").clearForm();
            $("#myModal, #myModalNew").modal("hide");
            return false;
        });
        //-----------------------

        //返回列表
        $("#goback,#gobackNew").click(function(){
            $("#myModal,#myModalNew").modal("hide");
           window.location.href="brandList";
        });
        //------------------------------------------------------

        //列表页面Bootstrap分页---------------
        var element = $('#pagination');
        var options = {
            bootstrapMajorVersion:3,
            currentPage:    ${pageResult.currentPage!""},       //当前页
            numberOfPages:  6,                                  //设置控件显示的页码数.即：类型为"page"的操作按钮的数量
            totalPages:     ${pageResult.totalPage!""},         //总页数
            size:'14px',                                        //大小
            alignment:'center',                                 //位置
            pageUrl: function(type, page, current){             //访问连接[]
                return "#"+page;
            },
            itemTexts: function (type, page, current) {        //样式文字设置
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "前一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "最后";
                    case "page":
                        return ""+page;
                }
            },
            shouldShowPage:function(type, page, current){//控制哪些显示，哪些隐藏
                switch(type)
                {
                    case "first":
                    case "last":
                        return false;  //首页最后一页隐藏
                    default:
                        return true;  //其他显示
                }
            },
            tooltipTitles: function (type, page, current) { //提示框，当鼠标放上去给提示
                switch (type) {
                    case "first":
                        return "提示首页";
                    case "prev":
                        return "提示前页";
                    case "next":
                        return "Tooltip for next page";
                    case "last":
                        return "Tooltip for last page";
                }
            },
            useBootstrapTooltip:true,
            onPageClicked: function(e,originalEvent,type,page){
                $("#currentPage").val(page);   //type是first,pre 等,  page是需要提交的页码
                $("#searchForm").submit();    //提交查询
            }
        }
        element.bootstrapPaginator(options);   //渲染
        /*var gopage = $("#gopage").val();
        $('#go').bootstrapPaginator("show",gopage)  //跳转*/
        //---------------------------------------------------------

        //新增弹出框---------------------
        $("#addNew").click(function() {
            $("#myModalNew").modal("show");
            $("#myModalNew").clearForm(true);
        });

        //保存新增表单
        $("#saveformNew").click(function () {
            if ($('#brandCatalog').val()==null || $('#brandProduct').val()==null ){
                $.messager.alert("温馨提示","请选择品牌分类与商品分类");
            }
            else{
                $("#brandEditFormNew").ajaxSubmit({
                    dataType: "json",
                    success: function (data) {
                        if (data.success) {
                            $.messager.model = {
                                ok:{ text: "确定", classed: 'btn-success' },
                                cancel: { text: "关闭", classed: 'btn-error'}
                            };
                            $.messager.confirm("温馨提示", "保存成功!", function() {
                                $("#myModal").modal("hide");
                                $("#currentPage").val(1);
                                $("#searchForm").submit();
                            });
                        }
                        else {
                            $.messager.popup("保存失敗"+data.errorMsg);
                        }
                    }
                })
            }
        });

        $('#brandCatalog').selectpicker({
            'selectedText': 'cat'
        });
	});
</script>
</head>
<body>

<div id="alert-content"></div>

<div class="container">
		<#include "../common/top.ftl"/>
		<div class="row">
			<div class="col-sm-3"><#assign currentMenu="brandList" />
				<#include "../common/menu.ftl" />
			</div>
			<div class="col-sm-9">
				<div class="page-header">
					<h3>商品品牌管理</h3>
                </div>
				<form id="searchForm" class="form-inline" method="post" action="/brandList">
					<input type="hidden" id="currentPage" name="currentPage" value=""/>
					<div class="form-group">
                        <input type="text" class="form-control" value="${qo.keyword!''}"  name="keyword" name="keyword"
							    placeholder="品牌名称" style="background-color: #eefbbb; padding-right: 150px" >
						<button id="query" class="btn btn-success"><i class="icon-search"></i> 查 询</button>
                        <a href="javascript:void(-1);" class="recovery"><img border="0" src="/images/回收站.png" style="padding-left:200px"></a></li>
					</div>
				</form>
					<div style="padding-right: 20px">
                        <button id="addNew" class="btn btn-success">新 增 </button>
					</div>
				<div class="panel panel-default">
					<table class="table">
						<thead>
							<tr align="center">
								<th>品牌log</th>
								<th>中文名</th>
								<th>英文名</th>
								<th>品牌描述</th>
								<th style="padding-left: 50x">品牌网址</th>
								<th>品牌排序</th>
								<th>编辑</th>
								<th>删除</th>
							</tr>
						</thead>
						<tbody>

						<#list pageResult.list as info>
							<tr>
                                <td>
                                    <a href="${info.logo!""}" >
                                        <img src="${info.logo!""}" class ="list_img">
                                    </a>
                                </td>
								<td style="padding-top: 25px">${info.chineseName}</td>
								<td style="padding-top: 25px">${info.englishName!""}</td>
								<td style="padding-top: 25px">${info.description!""}</td>
								<td style="padding-top: 25px">${info.url!""}</td>
								<td style="padding-top: 25px">${info.sequence!""}</td>
								<td style="padding-top: 20px">
                                    <a href="javascript:void(-1);" class="editBrand"  data-json='${info.jsonString}'><img border="0" src="/images/编辑.png" /></a>
                                </td>
                                <td style="padding-top: 20px">
                                    <a href="javascript:void(-1);" class="deleteBrand" data-json='${info.jsonString}'><img border="0" src="/images/删除.png" /></a>
								</td>
							</tr>
						</#list>
						</tbody>
					</table>

                    <!--此处分页-->
                    <div style="text-align: center;">
						<ul id="pagination" class="pagination"></ul>
                       <#-- <i>
                            <input type="text" class="form-control" id="gopage" name="gopage" style="background-color: #f4fbe2;size: 12px">
                            <button type="button" class="btn btn-info" id="go">跳转</button>
                        </i>-->
					</div>
				</div>
			</div>
		</div>
        <#--=======编辑品牌 弹出框===========-->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
                <div class ="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-body">
                            <form class="form-horizontal brandEditForm" id="brandEditForm" method="post" action="/editBrand">
                                <fieldset>
                                    <div id="legend" class="">
                                        <legend>查看与编辑</legend>
                                    </div>

                                    <input type="hidden" name="id" id="id" value="" />

									<div class="row" style="padding-bottom: 15px; padding-right: 50px">
                                        <label class="col-sm-2 control-label" for="name">品牌英文名</label>
                                        <div class="col-sm-4" >
                                            <input type="text" class="form-control" id="chineseName" name="chineseName" style="background-color: #f4fbe2">
                                        </div>
                                        <label class="col-sm-2 control-label" for="name">品牌英文名</label>
                                        <div class="col-sm-4">
                                            <input type="text" class="form-control" id="englishName" name="englishName" style="background-color: #f4fbe2">
                                        </div>
									</div>
									<div class="row" style="padding-bottom: 15px; padding-right: 50px">
                                        <label class="col-sm-2 control-label" for="name">创建时间</label>
                                        <div class="col-sm-4" >
                                            <label class="form-control" id="createdDate"></label>
                                        </div>
                                        <label class="col-sm-2 control-label" for="name">上次修改时间</label>
                                        <div class="col-sm-4">
                                            <label class="form-control" id="lastModifiedDate"></label>
                                        </div>
									</div>

                                    <div class="row" style="padding-bottom: 15px; padding-right: 50px">
                                        <label class="col-sm-2 control-label" for="name">品牌分类</label>
                                        <div class="col-sm-4">

                                            <select id="brandCatalogg" name="brandCatalogs" class="selectpicker show-tick form-control" multiple data-live-search="false">

                                                <option value="-1" style="background: #ffa30c; color: #fff;">不确定, 待选择</option>
                                                <#list catalogs  as item>
                                                    <option value="${item.id}">${item.name}</option>
                                                </#list>

                                            <#--注意: 在freemarker 中遍历集合应该使用  <#list products  as item>
                                            <c:forEach items="${catalogs}" var="item">
                                                <option value="${item.id}">${item.name}</option>
                                            </c:forEach>
                                            -->
                                            </select>

                                        </div>

                                        <label class="col-sm-2 control-label" for="name">旗下商品</label>
                                        <div class="col-sm-4">

                                            <select id="brandProductt" name="underProducts" class="selectpicker show-tick form-control" multiple data-live-search="false">
                                                <option value="-1" style="background: #ffa30c; color: #fff;">不确定, 待选择</option>
                                            <#list products  as item>
                                                <option value="${item.id}">${item.name}</option>
                                            </#list>
                                                <#--注意: 在freemarker 中遍历集合应该使用  <#list products  as item>
                                                <c:forEach items="${products}" var="item">
                                                    <option value="${item.id}">${item.name}</option>
                                                </c:forEach>
                                                -->
                                            </select>

                                        </div>
                                    </div>

									<div class="row" style="padding-bottom: 15px; padding-right: 50px">
                                        <label class="col-sm-2 control-label" for="name">品牌网址</label>
                                        <div class="col-sm-4">
                                            <input type="text" class="form-control" id="url" name="url" style="background-color: #f4fbe2">
                                        </div>
                                        <label class="col-sm-2 control-label" for="name">品牌排序</label>
                                        <div class="col-sm-4">
                                            <input type="text" class="form-control" id="sequence" name="sequence" style="background-color: #f4fbe2">
                                        </div>
									</div>

                                    <div class="row" style="padding-bottom: 15px; padding-right: 50px">
                                        <label class="col-sm-2 control-label" for="name">品牌描述</label>
                                        <div class="col-sm-6">
                                            <textarea id="description" name="description" rows="3" cols="80"></textarea>
                                        </div>
                                    </div>


                                    <div class="row" style="padding-bottom: 15px;  ">
                                        <label class="col-sm-2 control-label" for="name">品牌logo</label>
                                        <div class="col-sm-4"  >
                                            <img src="" id="image" style="width: 160px;/>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-sm-8">
                                            <div class="idCardItem">
                                                <div>
                                                    <a href="javascript:;" id="uploadBtn">上传log</a>
                                                </div>
                                                <img alt="" src="" class="uploadImg" id="uploadImg" />
                                                <input type="hidden" name="image" id="uploadImage" />
                                            </div>
                                            <div class="clearfix"></div>
                                        </div>
                                    </div>

                                </fieldset>
                            </form>
                        </div>
                  <div align="center" style="padding-bottom: 35px">
                        <button type="button" class="btn btn-info" id="saveform">保 存</button>
                        <button type="button" class="btn btn-info" id="cancel">取 消</button>
                        <button type="button" class="btn btn-info" id="goback">返 回</button>
				  </div>
                    </div>
                </div>
            </div>

            <#--=======新增品牌 弹出框===========-->
            <div class="modal fade" id="myModalNew" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-body">
                            <form class="form-horizontal brandEditForm" id="brandEditFormNew" method="post" action="/editBrand">
                                <fieldset>
                                    <input type="hidden" id="currentPage" name="currentPage" value=""/>
                                    <div id="legend" class="">
                                        <legend>新增品牌</legend>
                                    </div>

									<div class="row" style="padding-bottom: 15px; padding-right: 50px">
                                        <label class="col-sm-2 control-label" for="name">品牌中文名</label>
                                        <div class="col-sm-4" >
                                            <input type="text" class="form-control" id="chineseName" name="chineseName" style="background-color: #f4fbe2">
                                        </div>
                                        <label class="col-sm-2 control-label" for="name">品牌英文名</label>
                                        <div class="col-sm-4">
                                            <input type="text" class="form-control" id="englishNameNew" name="englishName" style="background-color: #f4fbe2">
                                        </div>
									</div>

									<div class="row" style="padding-bottom: 15px; padding-right: 50px">
                                            <label class="col-sm-2 control-label" for="name">品牌分类</label>
                                            <div class="col-sm-4">
                                                <select id="brandCatalog" name="brandCatalogs" class="selectpicker show-tick form-control" multiple data-live-search="false">

                                                   <option value="-1" style="background: #ffa30c; color: #fff;">不确定, 待选择</option>
                                                    <#list catalogs  as item>
                                                        <option value="${item.id}">${item.name}</option>
                                                    </#list>>
                                                </select>
                                            </div>

                                        <label class="col-sm-2 control-label" for="name">旗下商品</label>
                                        <div class="col-sm-4">

                                            <select id="brandProduct" name="underProducts" class="selectpicker show-tick form-control" multiple data-live-search="false">
                                                <option value="-1" style="background: #ffa30c; color: #fff;">不确定, 待选择</option>
                                                <#list products  as item>
                                                    <option value="${item.id}">${item.name}</option>
                                                </#list>>
                                            </select>

                                        </div>
									</div>


									<div class="row" style="padding-bottom: 15px; padding-right: 50px">
                                        <label class="col-sm-2 control-label" for="name">品牌网址</label>
                                        <div class="col-sm-4">
                                            <input type="text" class="form-control" id="urlNew" name="url" style="background-color: #f4fbe2">
                                        </div>
                                        <label class="col-sm-2 control-label" for="name">品牌排序</label>
                                        <div class="col-sm-4">
                                            <input type="text" class="form-control" id="sequenceNew" name="sequence" style="background-color: #f4fbe2">
                                        </div>
									</div>

                                    <div class="row" style="padding-bottom: 15px; padding-right: 50px">
                                        <label class="col-sm-2 control-label" for="name">品牌描述</label>
                                        <div class="col-sm-6">
                                            <textarea id="descriptionNew" name="description" rows="3" cols="80"></textarea>
                                        </div>
                                    </div>


                                    <div class="row" style="padding-bottom: 15px;  ">
                                        <label class="col-sm-2 control-label" for="name">品牌logo</label>
                                        <div class="col-sm-4"  >
                                            <img src="" id="image" style="width: 160px;/>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-sm-8">
                                            <div class="idCardItem">
                                                <div>
                                                    <a href="javascript:;" id="uploadBtnNew">上传log</a>
                                                </div>
                                                <img alt="" src="" class="uploadImg" id="uploadNewImg" />
                                                <input type="hidden" name="logo" id="logoUrl" />
                                            </div>
                                            <div class="clearfix"></div>
                                        </div>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                  <div align="center" style="padding-bottom: 35px">
                        <button type="button" class="btn btn-info" id="saveformNew">保 存</button>
                        <button type="button" class="btn btn-info" id="cancelNew">取 消</button>
                        <button type="button" class="btn btn-info" id="gobackNew">返 回</button>
				  </div>
                    </div>
                </div>
            </div>
	</div>
</body>
</html>